<template>
  <el-card class="box-card">
    <div class="text">
      <!-- 头部 -->
      <div class="header">
        <!-- 左侧是一个表单搜索框 -->
        <div class="lt">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            size="small"
          >
            <el-form-item>
              <el-input
                v-model="formInline.student_name"
                placeholder="学员姓名"
              />
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="formInline.subject_name"
                size="small"
                placeholder="归属学科"
                @change="changeSelect"
              >
                <el-option
                  v-for="item in list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="formInline.class_name"
                size="small"
                placeholder="归属班级"
              >
                <el-option
                  v-for="item in className1"
                  :key="item.id"
                  :label="item.class_name"
                  :value="item.class_name"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="formInline.student_state"
                size="small"
                placeholder="账户状态"
              >
                <el-option
                  v-for="item in xianshi"
                  :key="item.state"
                  :label="item.label"
                  :value="item.student_state"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                plain
                @click="onSubmit"
              >搜索</el-button>
              <el-button
                size="small"
                plain
                @click="resetFrom()"
              >重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="rt">
          <!-- 右侧是俩个按钮 一个 批量导入 增加学员 -->
          <el-button
            type="warning"
            size="small"
            plain
            @click="uploadShow = true"
          >批量导入</el-button>
          <!-- 批量导入的插件 -->
          <upload-excel :upload-show.sync="uploadShow" @uploadData="sendMsg" />
          <el-button
            type="primary"
            size="small"
            plain
            @click="twoLoding = true"
          >增加学员</el-button>
        </div>
      </div>
      <!--表格组件 -->
      <div class="list">
        <div v-show="isloding" style="margin-bottom: 1.25rem">
          <el-button type="success" size="small">批量启用</el-button>
          <el-button type="warning" size="small">批量禁用</el-button>
          <el-button type="danger" size="small">批量删除</el-button>
        </div>
        <el-table
          ref="tableData"
          border
          :data="tableData"
          tooltip-effect="dark"
          center="true"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="59" />
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="student_name" label="学生姓名" width="100" />
          <el-table-column
            prop="student_phone"
            label="手机号"
            show-overflow-tooltip
            width="110"
          />
          <el-table-column
            prop="class_name"
            label="班级名称"
            show-overflow-tooltip
            width="105"
          />
          <el-table-column
            prop="subject_name"
            label="学科名称"
            show-overflow-tooltip
            width="110"
          />
          <el-table-column
            prop="student_sex"
            label="性别"
            show-overflow-tooltip
            width="105"
            :formatter="statusFormatter"
          />
          <el-table-column
            prop="student_state"
            label="状态"
            show-overflow-tooltip
            width="105"
          >
            <template slot-scope="scope">
              <el-tag
                :type="
                  scope.row.student_state == '1'
                    ? 'warning'
                    : scope.row.student_state == '2'
                      ? 'success'
                      : 'info'
                "
              >
                {{
                  scope.row.student_state == "1"
                    ? "待审核"
                    : scope.row.student_state == "2"
                      ? "正常"
                      : "禁用"
                }}
              </el-tag>
            </template></el-table-column>
          <el-table-column
            prop="username"
            label="创建人"
            show-overflow-tooltip
            width="105"
          />
          <el-table-column
            prop="created_at"
            label="创建时间"
            show-overflow-tooltip
            width="160"
          />
          <el-table-column fixed="right" label="操作" width="145">
            <template slot-scope="{ row }">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="btnEdit(row.id)"
              />
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="delet(row.id)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="footer">
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 3.75rem"
        >
          <el-pagination
            background
            :page-sizes="[2, 3, 5, 10]"
            layout="total, sizes,prev, pager, next"
            :page-size="page.limit"
            :total="page.total"
            :current-page="page.page"
            @size-change="handleSizeChange"
            @current-change="changePage"
          />
        </el-row>
      </div>
      <!-- 弹框 -->
      <el-dialog v-if="dialogshow" :title="formData.id?'修改':'添加'" :visible.sync="twoLoding" @close="btnCancel">
        <!-- 表单 -->
        <el-form ref="formData" :model="formData" :rules="rules" label-width="7.5rem">
          <el-form-item label="归属学科" prop="subject_name">
            <el-select v-model="formData.subject_id" placeholder="请选择">
              <el-option
                v-for="item in list"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="归属班级" prop="class_name">
            <el-select v-model="formData.class_id" placeholder="请确保已选择学科">
              <el-option v-for="item in className1" :key="item.id" :value="item.id" :label="item.class_name" />
            </el-select>
          </el-form-item>
          <el-form-item label="学生姓名" prop="student_name">
            <el-input v-model="formData.student_name" placeholder="请输入学生姓名" />
          </el-form-item>
          <el-form-item label="手机号码" prop="student_phone" style="padding-left:.625rem">
            <el-input v-model="formData.student_phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="formData.student_password" placeholder="密码是 姓名+admin888" />
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="formData.student_sex" :label="1">男</el-radio>
            <el-radio v-model="formData.student_sex" :label="2">女</el-radio>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="formData.student_state">
              <el-radio :label="1">待审核</el-radio>
              <el-radio :label="2">正常</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <!-- footer插槽 -->
        <template v-slot:footer>
          <el-row type="flex" justify="center">
            <el-col :span="6">
              <el-button size="small" @click="btnCancel">取消</el-button>
              <el-button type="primary" size="small" @click="addBtn">确定</el-button>
            </el-col>
          </el-row>
        </template>
        <!--  -->
      </el-dialog>
      <!-- 导入的弹层 -->
    </div>
  </el-card>
</template>
<script>
import {
  getStudentList,
  getStudent,
  getStudentClass,
  deletStudentClass,
  changeStudent,
  addStudentClass,
  fn,
  daoru
} from '@/api/class'
import uploadExcel from '@/components/UploadExcel'
export default {
  name: 'Xiugai',
  components: { uploadExcel },
  props: {},
  data() {
    return {
      formInline: {
        student_name: '', // 学生姓名
        subject_name: '', // 学科名称
        class_name: '', // 班级名称
        student_state: '', // 学生状态
        subject_id: ''// 学科id
      },
      uploadShow: false, // 导入的弹层
      twoLoding: false, // 创建的弹层
      tableData: [], // 学生信息表单数据
      isloding: false, // 显示和隐藏
      page: {
        student_name: '',
        class_id: '',
        subject_id: '',
        student_state: '',
        page: 1, // 当前页
        limit: 10 // 每一页要展示的数量
        // total: 0, // 总页数

      },
      page1: {
        page: 1,
        limit: 1000,
        total: 0

      },
      list: [], // 下拉学科
      className1: [], // 下拉班级
      xianshi: [
        {
          student_state: 1,
          label: '待审核'
        },
        { student_state: 2, label: '正常' },
        { student_state: 0, label: '禁用' }
      ],
      // 插件
      formData: {
        subject_name: '', // 学科
        class_name: '', // 班级
        student_name: '', // 学生
        student_phone: '', // 电话
        student_password: '', // 密码
        student_sex: 1, // 学生性别
        student_state: 1
        // class_id: '' // 班级id

      },
      // 验证规则
      rules: {
        // subject_name: [{ required: true }],
        // class_name: [{ required: true }],
        student_name: [{ required: true, trigger: 'blur', message: '请输入学生姓名' }],
        student_phone: [{ required: true, trigger: 'blur', message: '请输入正确的手机号' }]
      },
      dialogshow: true
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getStudentList() // 调用请求列表
    this.getStudent() // 下拉学科
    this.getStudentClass() // 下 拉班级
  },
  mounted() {},
  methods: {
    // 下拉学科
    async getStudent() {
      const { data } = await getStudent({
        page: 1,
        limit: 1000,
        subject_id: '1'
      })
      this.list = data
      console.log(data)
    },
    // 下拉班级
    async getStudentClass() {
      const { data } = await getStudentClass({
        page: 1,
        limit: 1000,
        subject_id: '1'
      })
      this.className1 = data.list
      console.log(this.className1)
    },
    // 下拉框的二级联动
    changeSelect() {
      // 先清空里面的值
      this.formInline.class_name = ''
      // 遍历归属学科的选项数组
      for (const k in this.list[k]) {
        // 学科内容是否等于班级下拉数组中的某一项
        if (this.formInline.subject_name === this.list[k]) {
          this.className1 = this.data[this.formInline.subject_name]
        }
      }
    },
    // 搜索按钮
    async onSubmit() {
      const { data } = await getStudentList({
        student_name: this.formInline.student_name,
        subject_name: this.formInline.subject_name,
        class_name: this.formInline.class_name,
        student_state: this.formInline.student_state,
        page: 1,
        limit: 10
      })
      // console.log(data)
      this.tableData = data.list
    },
    // 最新要显示条数
    handleSizeChange(val) {
      this.page.limit = val
      this.getStudentList()
    },
    // 重置按钮
    resetFrom() {
      this.formInline = {
        student_name: '', // 学生姓名
        subject_name: '', // 学科名称
        class_name: '', // 班级名称
        student_state: ''
      }
      this.getStudentList()
    },
    // 表单控制选择框
    handleSelectionChange() {
      console.log(123)
    },
    // 删除按钮
    async delet(val) {
      console.log(val)
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await deletStudentClass({ id: [val] })
        // 如果不是第一页，且只有一个元素，删除成功，则需要把页码-1，重新拉取列表
        if (this.tableData.length === 1 && this.page.page !== 1) {
          this.page.page--
        }
        this.getStudentList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 编辑查看按钮 回显
    async btnEdit(id) {
      this.dialogshow = true
      // this.getStudent()
      // this.getStudentClass()
      const { data } = await changeStudent(id)
      console.log(data)
      this.formData = data
      // console.log(this.formData.id)
      this.twoLoding = true
      // this.formData.subject_name = JSON.parse(data.list.subject_name).map(val => { return val.name })
    },
    // 点击可以改变渲染
    changePage(newPage) {
      // 最新的页码数
      this.page.page = newPage
      this.getStudentList()
    },
    // 获取列表的所有信息
    async getStudentList() {
      const { data } = await getStudentList(this.page)
      // console.log(data)
      this.tableData = data.list
      this.page.total = data.total
    },
    // 格式化性别
    statusFormatter(row, value) {
      const state = row.student_sex
      if (state === 1) {
        return '男'
      } else {
        return '女'
      }
    },
    // 点击取消插件视图
    btnCancel() {
      // 重置原来的数据
      this.formData = {
        subject_name: '', // 学科
        class_name: '', // 班级
        student_name: '', // 学生
        student_phone: '', // 电话
        student_password: '', // 密码
        id: '', // 表单的id
        student_sex: 1, // 学生性别
        student_state: 1
      }
      this.twoLoding = false
    },
    // 弹层ok
    async addBtn() {
      try {
        await this.$refs.formData.validate()
        if (!this.formData.id) {
          // 添加
          await addStudentClass({
            student_name: this.formData.student_name,
            student_password: this.formData.student_password,
            student_phone: this.formData.student_phone,
            student_sex: this.formData.student_sex,
            student_state: this.formData.student_state,
            subject_id: this.formData.subject_id,
            class_id: this.formData.class_id
          })
          this.$message.success('添加成功')
        } else {
          // 编辑
          await fn(this.formData)
          this.$message.success('修改成功')
        }
        this.getStudentList()
        this.formData = {
          subject_name: '', // 学科
          class_name: '', // 班级
          student_name: '', // 学生
          student_phone: '', // 电话
          student_password: '', // 密码
          id: '', // 表单的id
          student_sex: 1, // 学生性别
          student_state: 1
        }
      } catch (error) {
        console.log(error)
        this.$message.success('添加失败')
      }
      this.twoLoding = false
    },
    // 导入文件
    async sendMsg(value) {
      // console.log(value)
      await daoru(value)
      this.getStudentList()
      this.uploadShow = false
    }
  }
}
</script>
<style lang="scss" scoped>
.box-card {
  margin: .9375rem;
}
.header {
  display: flex;
}
.rt {
  margin-left: 4.125rem;
}
.el-form-item{
  display: inline-block;
}
</style>
